<template>
	<view>
		<u-navbar title="个人信息" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="image">
				<u--image width=7rem height=7rem @click="test()" :src="userInfo.avatar" shape="circle"></u--image>
			</view>
			<view class="box">
				<view class='account'>
					<span>账号&nbsp;&nbsp;{{ userInfo.email }}</span>
				</view>
				<view class='nickname' @click="goNickname">
					<span>昵称&nbsp;&nbsp;{{ userInfo.nickName }}</span>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class='sex' @click="goSex()">
					<span>性别</span>
					<view v-if="userInfo.sex == '男'">男生</view>
					<view v-if="userInfo.sex == '女'">女生</view>

					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</view>

		<u-popup :show="show" mode="bottom" @open="open" @close="close">
			<view class="popupbox">
				<view class="img">
					<u--image @click="chioceSex('男')" width=3rem height=3rem
						src="http://182.61.31.180:5000/images/1655382191101_性别男.png"></u--image>
					<u--image @click="chioceSex('女')" width=3rem height=3rem
						src="http://182.61.31.180:5000/images/1655382208811_性别女.png"></u--image>

				</view>
				<view class="sextxt">
					<span>男生</span>
					<span>女生</span>
				</view>
				<view class="cancel" @click="canCel">
					<span>取消</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { uploadBookCover } from '@/Api'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			show: false,
			isMan: '-1',
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		chioceSex(sex) {
			this.$store.dispatch('updateSex', sex)
			this.show = false
		},
		test() {
			uni.chooseImage({
				count: 1,
				success: res => {
					console.log(res)
					uploadBookCover(res.tempFilePaths[0]).then(result => {
						console.log(result)
						this.$store.dispatch('updateAvatar', JSON.parse(result.data).data)
					})
				}
			})
		},
		goNickname() {
			this.$Router.push({
				name: 'updnickname'
			})
		},
		goSex() {
			this.show = true;
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false
			// console.log('close');
		},
		canCel() {
			this.show = false
		},

	},

}
</script>

<style lang="scss" scoped>
.main {
	height: 100%;

	.image {

		margin: 5rem 1rem 1rem 1rem;
		display: flex;
		justify-content: center;
	}

	.box {
		width: 80%;
		margin: 3rem auto;
		padding: 1rem 1rem;
		background: white;
		border-radius: 2rem;

		view {
			height: 4rem;
			line-height: 4rem;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: space-between;

			.u-icon {
				line-height: 4rem;
				border: none;
				margin-right: 1rem;
				// display: inline-block;
			}
		}
	}

}

.popupbox {
	height: 10rem;
	background-color: white;
	border-radius: 5rem;

	.img {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 1rem 5rem 0rem 5rem;
	}

	.sextxt {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0rem 5.5rem 1rem 5.5rem;
	}

	.cancel {
		height: 3rem;
		font-size: 1.2rem;
		display: flex;
		justify-content: center;
		padding-top: 0.5rem;
		border-top: 1px solid #ccc;
	}
}
</style>
